<template>
    <div>
        <h1>开始使用</h1>
        <p>本节将介绍如何在项目中使用 MontUI。</p>
        <div>
            <h2>完整引入</h2>
            <p>如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。</p>
            <div class="code-box">
                <pre>
                    <code>
    import { createApp } from 'vue'
    import App from './App.vue'
    import MontUI from 'vue-montui';

    const app = createApp(App)
    app.use(MontUI)
    app.mount('#app')
                    </code>
                </pre>
            </div>
        </div>
        <div>
            <h2>按需引入</h2>
            <p>可以根据自己的需求按需引入 MontUI 组件。</p>
            <div class="code-box">
                <pre>
                    <code>
    import { createApp } from 'vue'
    import App from './App.vue'
    import { MoButton } from 'vue-montui';

    const app = createApp(App)
    app.use(MoButton)
    app.mount('#app')
                    </code>
                </pre>
            </div>
        </div>
        
       
    </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue';
export default {
    name: 'start',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        let data = reactive({
        });

        
        return {
            ...toRefs(data)
        };
    }
};

</script>
<style lang='scss' scoped>
.code-box {
    border-radius: 5px;
    // padding: 20px;
    margin: 10px 10px 10px 0;
    font-size: 14px;
}
</style>
